<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小球曲线运动</title>
    <style>
        #box{
            width: 20px;
            height: 20px;
            background-color: red;
            border-radius: 50%;
 
            position: fixed;
            left: 20px;
            top: 300px;
        }
    </style>
</head>
<body>
    <div id="box">
 
    </div>
    <script>
        var oBox = document.getElementById("box");
        var timer = null;
        var degStart = 0;
        timer = setInterval(function () {
            degStart ++;
            oBox.style.left = 20 + degStart + "px";
            oBox.style.top = 300 + Math.sin(degStart * 2 * Math.PI / 360)*100 + "px";
        },10)
    </script>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小球曲线运动</title>
    <style>
        #box{
            width: 20px;
            height: 20px;
            background-color: red;
            border-radius: 50%;
 
            position: fixed;
            left: 20px;
            top: 300px;
        }
        .show{
            width: 20px;
            height: 20px;
            background-color: red;
            border-radius: 50%;
            position: fixed;
        }
    </style>
</head>
<body>
    <div id="box">
 
    </div>
    <script>
        var oBox = document.getElementById("box");
        var timer = null;
        var degStart = 0;
        timer = setInterval(function () {
            var newBox = document.createElement("div");
            newBox.className = "show";
            document.body.appendChild(newBox);
            degStart ++;
            newBox.style.left = 20 + degStart + "px";
            // newBox.style.top = 300 + Math.sin(degStart * 2 * Math.PI / 360)*100 + "px";
            // newBox.style.top = 300 + -Math.abs(Math.sin(degStart * 2 * Math.PI / 360)*100) + "px";
            newBox.style.top = 300 + -(Math.sin(degStart * 2 * Math.PI / 360)*100) + "px";
        },10)
    </script
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点名器</title>
    <style>
        body{
            background-color: #0D1635;
        }
        h2{
            font-size: 70px;
            color: yellow;
            text-align: center;
        }
        p{
            font-size: 60px;
            color: #fff;
            text-align: center;
        }
    </style>
</head>
<body>
    <h2 id="btn">start</h2>
    <p id="con">开始点名</p>
    <script>
        var oBtn = document.getElementById("btn");
        var oCon = document.getElementById("con");
        var names = ["陈纪法","张三","李四","胡宝林","柏洪洋"];
        var flag = true;//保存当前停止状态
        var timer = null;
        oBtn.onclick = function () {
            if(flag){
                oBtn.innerHTML = "stop";
                timer = setInterval(function () {
                    // names中的值应该是[0,4]  [0,5)
                    oCon.innerHTML = names[Math.floor(Math.random()*names.length)];
                },30)
            }else{
                oBtn.innerHTML = "start";
                clearInterval(timer);
            }
 
            flag = !flag;
        }
    </script>
</body>
</html> -->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点名器</title>
    <style>
        body{
            background-color: #0D1635;
        }
        h2{
            font-size: 70px;
            color: yellow;
            text-align: center;
        }
        p{
            font-size: 60px;
            color: #fff;
            text-align: center;
        }
    </style>
</head>
<body>
    <h2 id="btn">start</h2>
    <p id="con">开始点名</p>
    <script>
        var oBtn = document.getElementById("btn");
        var oCon = document.getElementById("con");
        var names = ["陈纪法","张三","李四","胡宝林","柏洪洋"];
        var flag = true;//保存当前停止状态
        var timer = null;
        oBtn.onclick = function () {
            if(flag){
                oBtn.innerHTML = "stop";
                timer = setInterval(function () {
                    // names中的值应该是[0,4]  [0,5)
                    oCon.innerHTML = names[Math.floor(Math.random()*names.length)];
                },30)
            }else{
                oBtn.innerHTML = "start";
                clearInterval(timer);
            }
 
            flag = !flag;
        }
    </script>
</body>
</html>